@charset "UTF-8";
/* CSS Document */
html { height: 100%; }
body { 
	height:100%;
	font-family: Arial, 'Microsoft YaHei';
	margin:0;
	padding:0;
	background:url(../img/body_bg3.png) no-repeat center top #f990a9;
	background-attachment: fixed;
}
input {
	font-family: Arial, 'Microsoft YaHei';
}
a {
	color: #000;
	text-decoration:none; 
}
a img { 
	border: 0; 
}

.header {
	width:100%;
	height:40px;
	background: #413C3C;
}
.header .back {
	width: 24px;
	height: 24px;
	background: url(../img/btn_back.png);
/*	margin-left: 10px;
	margin-top: 9px;*/
	position: absolute;
	top: 9px;
	left: 10px;
}
.header .title {
	color:#fff;
	font-size: 15px;
	line-height:40px; 
	text-align:center; 
	margin: 0 30px;
}
.page_title { 
	background: url(../img/title_1.png) no-repeat;
	width: 76px;
	height:22px;
	margin:11px auto;
}

.main_container { }
.main_container .page_title_1 { 
	background: url(../img/title_1.png) no-repeat;
	width: 76px;
	height:22px;
	margin:11px auto;
}
.main_container .top { 
	background:url(../img/textcontent_bg_01.png) no-repeat right top; 
	width:82.5%;
	height: 33px;
	margin:0 auto;
}
.main_container .top_1 { 
	background:url(../img/textcontent_bg_01.png) no-repeat left top; 
	width:100%;
	height: 33px;
}
.main_container .top_2 { 
	background: #fff; 
	width:80%;
	height: 33px;
	font-size: 15px;
	color: #fe5f5f;
	line-height:33px;
	text-align:center;
	margin:0 auto;
}
.main_container .content {
	width: 82.5%;
	background: #fff;
	margin:0 auto;
}
.main_container .content .text {
	padding: 5px 15px;
	font-size: 12px;
	color: #333;
}
.main_container .botton { 
	background:url(../img/textcontent_bg_03.png) no-repeat right top; 
	width:82.5%;
	height: 45px;
	margin:0 auto;
}
.main_container .botton_1 { 
	background:url(../img/textcontent_bg_03.png) no-repeat left top; 
	width:100%;
	height: 45px;
}
.main_container .botton_2 { 
	background: #FD5F5F; 
	width:80%;
	height: 45px;
	font-size: 15px;
	color: #fff;
	line-height:45px;
	text-align:center;
	margin:0 auto;
}


/* ------- start checkbox div+css --------*/ 

/*在前面的例子中，我们把div作为checkbox的滑动条带或者外部的圆圈，但是这一次我们不需要了，可以使用div元素来设置复选框的区域。*/

/**
 * Checkbox Five
 */
.checkboxFive {
	width: 18px;
	margin: 2px 10px;
	position: relative;
	float:left;
}
/*label标签用于Click事件和我们要定义的复选框的方框样式。*/

/**
 * Create the box for the checkbox
 */
.checkboxFive label {
	cursor: pointer;
	position: absolute;
	width: 18px;
	height: 18px;
	top: 0;
  	left: 0;
	/*
	background: url(../img/checkbox_normal.png) no-repeat center;
	background: #eee;*/
	background: #fff;
	border:1px solid #612929;
	border-radius: 3px;
	
}
/*接下来，我们要创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下，这样看起来就像是一个对勾。*/

/**
 * Display the tick inside the checkbox
 */
.checkboxFive label:after {
	opacity: 0.2;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 4px;
	left: 4px;
	border: 2px solid #612929;
	border-top: none;
	border-right: none;
 
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/*在上面的CSS中，我们已经设置它的透明度为0.2，所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点，在选中时，可以把设置为不透明。*/

/**
 * Create the hover event of the tick
 */
.checkboxFive label:hover::after {
	opacity: 0.5;
}
 
/**
 * Create the checkbox state for the tick
 */
.checkboxFive input[type=checkbox]:checked + label:after {
	opacity: 1;
}
/* ------- end checkbox div+css --------*/ 

.read {
	float:left;
	font-sie: 13px;
	color:#612929; 
	line-height: 24px;
}
.read_container {
	width:82.5%;
	height:30px;
	margin: 0 auto;
	margin-top:10px;
}


/**---------------------  page2  -----------------**/
.main_container .page_title_2 { 
	background: url(../img/title_2.png) no-repeat;
	width: 76px;
	height:22px;
	margin:11px auto;
}
.service_option_container {
	width:82.5%;
	margin:10px auto;
	clear:both;
}
.service_option_container .option {
	width: 82px;
	height:65px;
	padding-top: 17px;
	margin-bottom:15px;
	font-size: 15px; 
/*	font-weight:bold; */
	text-align:center;
	line-height: 26px;
}
.service_option_container .option_bg1 {
	background:url(../img/service_bg1.png) ;
}
.service_option_container .option_bg2 {
	background:url(../img/service_bg1.png) ;
	margin:0 auto;
}
.service_option_container .option_bg3 {
	background:url(../img/service_bg2.png) ;
	float: right;
}

.service_option_container .option_width {
	width:33.3%;
	float:left;
}
.roundedrectangle_container {
	width:82.5%;
	margin:0px auto;
	clear:both;
}
.roundedrectangle_container .top {
	width: 29.5%;
	background:url(../img/roundedrectangle_01.png) no-repeat left;
	height:24px;
	float:left;
}
.roundedrectangle_container .top_1 {
	width: 29.5%;
	background:url(../img/roundedrectangle_02.png) no-repeat right;
	height:24px;
	float:left;

}
.roundedrectangle_container .top_title {
	width: 41%;
	background:url(../img/query&undo_title.png) no-repeat center;
	height:24px;
	float:left;
}
.btn_container {
	width:82.5%;
	margin: 0 auto;
	clear:both;
}
.btn_container .btn_container_1 {
	width:2px;
	float:left;
	border-left: 1px solid #fff;
	height:120px;
}
.btn_container .btn_container_2 {
	width: 2px;
	float:right;
	height:120px;
	border-right: 1px solid #fff;
}

.btn_container .btn_area {
	margin:0px 2px 0px 2px; 
	float: left;
	width:95%;
	height:100px;
}
.btn_container .btn {
	background:url(../img/servicebtn_bg.png) no-repeat;
	width: 217px;
	height: 45px;
	text-align:center;
	color:#333;
	font-size:15px;
	line-height:45px;
	margin:12px auto;
}

.roundedrectangle_bottom {
	width: 82.5%;
	height: 10px;
	clear:both;
	margin:0px auto 0px auto;
}
.roundedrectangle_bottom .bottom_1 {
	width: 50%;
	background:url(../img/roundedrectangle_04.png) no-repeat left;
	height:10px;
	float:left;

}
.roundedrectangle_bottom .bottom_2 {
	width: 50%;
	background:url(../img/roundedrectangle_05.png) no-repeat right;
	height:10px;
	float:right;

}
.tips {
	width:82.5%; 
	margin:15px auto;
	line-height:10px;
	font-size: 11px;
	color:#7f3949;
}
.blank_line_10 {
	height:10px; 
	clear:both;
}
.blank_line_20 {
	height:20px; 
	clear:both;
}

/**---------------------  page3  -----------------**/
.main_container .page_title_3 { 
	background: url(../img/title_3.png) no-repeat;
	width: 120px;
	height:22px;
	margin:10px auto;
}
.rounded_container {
	width:94%;
	margin:0px auto;
	clear:both;
}
.rounded_container .top {
	width: 37%;
	background:url(../img/roundedrectangle_01.png) no-repeat left bottom;
	height:32px;
	float:left;
}
.rounded_container .top_1 {
	width: 37%;
	background:url(../img/roundedrectangle_02.png) no-repeat right bottom;
	height:32px;
	float:left;

}
.rounded_container .title_female {
	width: 26%;
	background:url(../img/title_female.png) no-repeat center;
	height:32px;
	float:left;
}
.rounded_container .title_male {
	width: 26%;
	background:url(../img/title_male.png) no-repeat center;
	height:32px;
	float:left;
}
.rounded_container .middle {
	width: 100%;
	margin: 0 auto;
	clear:both;
	height:154px;
}
.rounded_container .middle_1 {
	width:100%;
	background: url(../img/white.gif) repeat-y left;
	height:100%;
}
.rounded_container .middle_2 {
	width: 100%;
	background: url(../img/white.gif) repeat-y right;
	height:100%;
}
.rounded_container .bottom {
	width: 100%;
	height: 10px;
	clear:both;
	margin:0px auto;
}
.rounded_container .bottom_1 {
	width: 50%;
	background:url(../img/roundedrectangle_04.png) no-repeat left;
	height:10px;
	float:left;

}
.rounded_container .bottom_2 {
	width: 50%;
	background:url(../img/roundedrectangle_05.png) no-repeat right;
	height:10px;
	float:right;

}
.rounded_container .form_area {
	width:88%;
	margin:2px auto 2px auto;
	padding: 0 5px;
}
.rounded_container .male {
	background:url(../img/bg_male.png) no-repeat 95% bottom #fff;
}
.rounded_container .female {
	background:url(../img/bg_female.png) no-repeat 96% 95% #fff;
}
.rounded_container .form_area .line {
	/*width:100%;*/
	height:29px;
	
	padding: 0 3px;
	border-bottom:1px solid #F0F0F0;
	clear:both;
}
.rounded_container .form_area .line .label {
	width:60px;
	text-align:right;
	color:#999999;
	font-size:9px;
	line-height:29px;
	margin-right:10px;
	float:left;
}
.rounded_container .form_area .line .input1 {
	margin-top:2px;
	height:23px;
	line-height:23px;
	float:left;
	width: 100%;
	border:0;
	background: transparent;
	font-size:14px;
}
.rounded_container .form_area .line .input_width {
	padding-left:70px; 
	padding-right:32px;
}
.rounded_container .form_area .line .arrow_down {
	float: right;
	width: 30px;
	height: 30px;
	background:url(../img/arrow_down.png) no-repeat center;
}



/**---------------------  page4  -----------------**/
.main_container .page_title_4 { 
	background: url(../img/title_4.png) no-repeat;
	width: 120px;
	height:22px;
	margin:10px auto;
}
.rounded_container .middle_auto {
	height:auto !important;
}

.btn {
	background: url(../img/btn_bg.png) left no-repeat;
	height: 45px;
	width:82.72%;
	margin: 0 auto;
}
.btn_1 {
	background: url(../img/btn_bg.png) right no-repeat;
	height: 45px;
	width:100%;
}
.btn_2 {
	background: #fff;
	height: 45px;
	line-height: 45px;
	width:96%;
	margin: 0 auto;
	font-size: 15px;
	color: #444;
	text-align:center;
}




/**---------------------  page5  --------------------**/
.main_container .page_title_5 { 
	background: url(../img/title_5.png) no-repeat;
	width: 140px;
	height:22px;
	margin:10px auto;
}
.btn_width1 {
	width: 84%;
}

.bg_top {
	background: url(../img/btn_bg.png) left top no-repeat;
	height: 10px;
	width:82.5%;
	margin: 0 auto;
}
.bg_top_1 {
	background: url(../img/btn_bg.png) right top no-repeat;
	height: 10px;
	width:100%;
}
.bg_top_2 {
	background: #fff;
	height: 10px;
	width:70%;
	margin: 0 auto;
}
.bg_middle {
	background: #fff;
	width:82.5%;
	margin: 0 auto;
	height:76%;
	display:table;
	vertical-align:middle;
}
.bg_bottom {
	background: url(../img/btn_bg.png) left bottom no-repeat;
	height: 10px;
	width:82.5%;
	margin: 0 auto;
}
.bg_bottom_1 {
	background: url(../img/btn_bg.png) right bottom no-repeat;
	height: 10px;
	width:100%;
}
.bg_bottom_2 {
	background: #fff;
	height: 10px;
	width:70%;
	margin: 0 auto;
}
.text_container {
	width:90%; 
	margin:auto auto;
	font-size:15px;
	color: #444;
	text-align:center;
	vertical-align:middle;
	display:table-cell;
	padding-bottom: 15%;
}
.text_container .tick {
	background:url(../img/icon_tick.png);
	width:50px;
	height:50px;
	margin:0 auto;
}
.text_container p {
	text-align:center;
	width:100%;
}
.text_container .bookno {
	font-size:20px;
	font-family:Avenir;
}






/**---------------------  page6  --------------------**/





/**---------------------  page7  --------------------**/



/**---------------------  page8 & 9  --------------------**/
.bg_middle_height {
	height:auto !important; 
}
.fill_container {
	width:100%;
	padding: 0 3px;
}
.fill_tip { 
	font-size:15px;
	color:#bbb;
	padding-left:5px;
	line-height:39px;
	height: 39px;
	border-bottom:1px solid #F0F0F0;
	margin-right:6px;
}
.fill_container .line {
	height:39px;
	padding: 0 3px;
	margin-right:6px;
	border-bottom:1px solid #F0F0F0;
}

.fill_container .line .label {
	width:50px;
	text-align:right;
	color:#999999;
	font-size:9px;
	line-height:39px;
	margin-right:10px;
	float:left;
}
.fill_container .line .input1 {
	margin-top:5px;
	height:25px;
	line-height:25px;
	float:left;
	width: 100%;
	border:0;
	background: transparent;
	font-size:14px;
}
.fill_container .line .input_width {
	padding-left:60px; 
	padding-right:6px;
}
.fill_container .line2 {
	height:29px;
	padding: 0 3px;
	margin-right:6px;
	border-bottom:0px solid #F0F0F0;
}

.fill_container .line2 .label {
	width:50px;
	text-align:right;
	color:#999999;
	font-size:9px;
	line-height:29px;
	margin-right:10px;
	margin-top:5px;
	float:left;
}
.fill_container .line2 .input1 {
	margin-top: 6px;
	height:25px;
	line-height:25px;
	float:left;
	width: 100%;
	border:0;
	background: transparent;
	font-size:14px;
}
.fill_container .line2 .input_width {
	padding-left:60px; 
	padding-right:6px;
}



